iT邦幫忙

2022 iThome 鐵人賽

DAY 29
0
自我挑戰組

30天JavaScript自學挑戰系列 第 29

Day 29 Scope Chain

  • 分享至 

  • xImage
  •  

範疇(scope)是指某個變數被宣告的空間或環境,種類有全域範疇(global scope)、函數範疇(function scope)和區塊範疇(block scope),而對於函數來說,範疇基本上就等同於EC中的變數環境。

一個變數的範疇是指在整個程式碼中該變數可以被存取的地方或是範圍,雖然範疇和變數範疇乍聽之下像是相同的東西,但它們之間還是有些微的差異。

top-level code是全域範疇,全域範疇適用於所有在函數及區塊以外宣告的變數,因此這些變數在程式的任何地方都可以被存取,包括在函數及區塊內。

每個函數也會產生一個範疇,在該函數範疇內宣告的變數只能在該函數中存取,不能為外部所用(如下述例子),因此相對於全域範疇來說,這也叫局部範疇(local scope)。

function greeting(name) {
  const message = "Hello!";
  console.log(`${message} ${name}`);
}

greeting("Sandy");
// Hello! Sandy
console.log(message);
// Uncaught ReferenceError: message is not defined

區塊範疇是從ES6開始有的,區塊指的是花括號{}之間的所有內容,像是在if語句或是for loop的花括號內宣告的變數只能在花括號內被存取,不能為外部所用。

最大的區別在於,區塊範疇只限於使用const或let宣告的變數,換句話說,用const或let宣告的變數會被限制在這個區塊中,假如使用var來宣告變數,那這個變數將不會被限制在這個區塊中,可以為當前函數或是全域所用,這也是為什麼在ES5之前是使用var宣告變數,因為當時只有全域範疇和函數範疇,從ES6開始,不只函數會創造範疇,區塊也會創造範疇,但這僅適用於ES6的變數類型(const或let)。

如果在某個範疇中想取用的變數並不存在該範疇中,那它便會往外對父級範疇(parent scope)去尋找是否有這個變數可供存取,如果沒有的話就會出現錯誤,這就是範疇鏈(scope chain)的運作原理,而這個過程則稱作變數查找(variable lookup),變數查找的方向是單一的,只能往外對父級範疇查找,父級範疇並不能向內存取子範疇(child scope)之中的變數。


上一篇
Day 28 Call Stack
下一篇
Day 30 "this" 關鍵字
系列文
30天JavaScript自學挑戰30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言